<template>
  <box title="预警中心">
    <template v-slot:container>
      <div class="box clearfix">
        <!-- 选项卡  currentCard:当前选中的按钮  changeCard:处理函数  numbers：button里的数量 -->
        <choose-card
          class="tab-menu"
          :currentCard="currentCard"
          @changeCard="changeCard"
          :numbers="numbers"
        />
        <!-- 列表 -->
        <list :listData="currentList.data" @listClick="checkWarn" />
        <!-- 分页 -->
        <el-pagination
          layout="prev, pager, next"
          :total="currentList.total"
          :page-size="pageNumber"
          :pager-count="5"
          prev-text="上一页"
          next-text="下一页"
          class="page"
          :current-page="currentList.currentPage"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </template>
  </box>
</template>

<script>
import box from '@/components/slot_box'
import chooseCard from './chooseCard.vue'
import list from './list.vue'

import API, { warnCenter as warnCenterApi } from '@/api'

export default {
  name: 'warnCenter-index',
  components: {
    box,
    chooseCard,
    list
  },

  data () {
    return {
      currentCard: 0, // 当前选中的选项卡
      currentPage: 1, // 当前页码
      pageNumber: 7, // 每页显示的数据容量,
      listData: [
        {
          total: 0,
          data: []
        }
      ]
    }
  },
  computed: {
    // 当前操作的数据
    currentList () {
      return this.listData[this.currentCard]
    },
    numbers () {
      return this.listData.map((item) => item.total)
    }
  },
  methods: {
    async getAllList () {
      const data0 = (
        await API(warnCenterApi.LIST, {
          id: 123,
          pageNo: 1,
          pageSize: this.pageNumber,
          status: '0'
        })
      ).data
      const data1 = (
        await API(warnCenterApi.LIST, {
          id: 123,
          pageNo: 1,
          pageSize: this.pageNumber,
          status: '1'
        })
      ).data
      const data2 = (
        await API(warnCenterApi.LIST, {
          id: 123,
          pageNo: 1,
          pageSize: this.pageNumber,
          status: '2'
        })
      ).data
      const list0 = {
        total: data0.total,
        currentPage: data0.current,
        data: [...data0.records],
        status: 0
      }
      const list1 = {
        total: data1.total,
        currentPage: data1.current,
        data: [...data1.records],
        status: 1
      }
      const list2 = {
        total: data2.total,
        currentPage: data2.current,
        data: [...data2.records],
        status: 2
      }
      this.listData = [list0, list1, list2]
      this.$store.commit('CHANGE_WARN_NUMBER', list0.total)
    },
    // 选项卡事件
    changeCard (newCard) {
      this.currentCard = newCard
    },
    // 分页事件
    async changePage (newPage) {
      const newList = (
        await API(warnCenterApi.LIST, {
          id: 123,
          pageNo: newPage,
          pageSize: this.pageNumber,
          status: this.currentList.status
        })
      ).data
      const lists = JSON.parse(JSON.stringify(this.listData))
      lists[this.currentCard] = {
        ...this.currentList,
        currentPage: newList.current,
        data: newList.records
      }
      this.listData = lists
      this.currentPage = newPage
    },
    // 列表点击事件
    checkWarn (listData, index) {
      this.$emit('checkWarn', listData, index)
    }
  },
  mounted () {
    this.getAllList()
  }
}
</script>

<style lang="scss" scoped>
.tab-menu {
  margin: 30px 0;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.page {
  margin-right: 40px;
  margin-top: 20px;
  float: right;
}
.page /deep/ button,
.page /deep/ .el-pager .number,
.page /deep/ .el-pager .more {
  background: rgb(2, 72, 142);
  color: #fff;
  width: 120px;
  text-align: center;
  padding: 0;
  height: 50px;
}
.page /deep/ .el-pager .number,
.page /deep/ .el-pager .more {
  width: 60px;
  height: 50px;
  line-height: 50px;
  margin: 0 10px;
}
.page /deep/ .el-pager .number.active {
  background: rgb(49, 150, 250);
}
.box {
  padding: 0 24px 24px;
}
</style>
